<template>
	<view class="user-container">
		<!-- 顶部用户信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<view class="avatar-wrapper">
					<image :src="userInfo.avatar" mode="aspectFill" class="avatar-img"></image>
				</view>
				<view class="user-details">
					<text class="user-name">{{ userInfo.username || '未设置昵称' }}</text>
					<text class="user-id">ID: {{ userInfo.id || '未知' }}</text>
				</view>
			</view>
		</view>
		
		
		
		<!-- 账号管理 -->
		<view class="section-card">
			<view class="section-header">
				<text class="section-title">账号管理</text>
			</view>
			
			<view class="menu-list">
				<view class="menu-item" @click="editUserInfo">
					<text class="menu-icon">👤</text>
					<text class="menu-text">修改个人信息</text>
					<text class="menu-arrow">›</text>
				</view>

				<!-- 管理员页面选项，仅管理员可见 -->
				<view class="menu-item" @click="goToAdminPage" v-if="userInfo.role === 'admin'">
					<text class="menu-icon">⚙️</text>
					<text class="menu-text">管理员页面</text>
					<text class="menu-arrow">›</text>
				</view>

			</view>
		</view>
		
		<!-- 退出登录 -->
		<view class="logout-btn" @click="confirmLogout">
			退出登录
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request.js'

// 用户信息
const userInfo = ref({
	id: '',
	username: '',
	role: '',
	avatar: '',
	phone: ''
})

// 修改用户信息
const editUserInfo = () => {
	uni.navigateTo({
		url: '/pages/user/edit-profile'
	})
}

// 联系我们
const contactUs = () => {
	uni.navigateTo({
		url: '/pages/user/contact'
	})
}

// 跳转到管理员页面
const goToAdminPage = () => {
	uni.navigateTo({
		url: '/pages/admin/index'
	})
}

// 退出登录确认
const confirmLogout = () => {
	uni.showModal({
		title: '退出登录',
		content: '确定要退出当前账号吗？',
		success: (res) => {
			if (res.confirm) {
				loginout()
			}
		}
	})
}

// 退出登录
function loginout() {
	uni.removeStorageSync("sa-token")
	uni.showToast({
		title: '退出登录'
	})
	setTimeout(() => {
		uni.reLaunch({
			url: "/pages/login/login",
		});
	}, 1500);
}

onMounted(() => {
	// 页面加载时获取用户信息
	request('/user/getUserInfo',{
		method:'GET'
	}).then(res=>{
		if(res.code === 200){
			userInfo.value = res.data
		}else{
			uni.showToast({
				title: res.msg || '获取用户信息失败',
				icon: 'none'
			})
		}
	})
})
</script>

<style>
/* 暗黑+紫色高科技风格 */
.user-container {
	padding: 30rpx;
	background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
	min-height: 100vh;
}

/* 用户信息卡片 */
.user-card {
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 16rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	margin-bottom: 30rpx;
	border: 1px solid #2D1457;
}
.user-header {
	display: flex;
	align-items: center;
}
.avatar-wrapper {
	position: relative;
	margin-right: 30rpx;
}
.avatar-wrapper::before {
	content: '';
	position: absolute;
	top: -12rpx;
	left: -12rpx;
	width: 174rpx;
	height: 174rpx;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #A259FF, #7B2FF2, #10AEFF, #F357A8, #A259FF 100%);
	filter: blur(6rpx);
	opacity: 0.85;
	z-index: 0;
	animation: avatar-glow 2.5s linear infinite;
}
@keyframes avatar-glow {
	0% { filter: blur(6rpx) brightness(1); }
	50% { filter: blur(12rpx) brightness(1.2); }
	100% { filter: blur(6rpx) brightness(1); }
}
.avatar-img {
	position: relative;
	z-index: 1;
	width: 150rpx;
	height: 150rpx;
	border-radius: 75rpx;
	border: 4rpx solid #A259FF;
	background: #18122B;
}
.user-details {
	flex: 1;
}
.user-name {
	font-size: 36rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 12rpx;
	display: block;
}
.user-role {
	display: inline-block;
	font-size: 24rpx;
	color: #fff;
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	margin-bottom: 12rpx;
}
.user-id {
	font-size: 24rpx;
	color: #A259FF;
	display: block;
}

/* 通用卡片样式 */
.section-card {
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	margin-bottom: 30rpx;
	border: 1px solid #2D1457;
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 24rpx;
	border-bottom: 1px solid #2D1457;
	margin-bottom: 24rpx;
}
.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #A259FF;
}
.add-btn {
	font-size: 28rpx;
	color: #A259FF;
}

/* 患者卡片样式 */
.patient-card {
	background-color: #f9f9f9;
	border-radius: 8rpx;
	padding: 24rpx;
}

.patient-info {
	display: flex;
	align-items: center;
}

.patient-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	margin-right: 20rpx;
}

.patient-details {
	flex: 1;
}

.patient-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.patient-status {
	font-size: 24rpx;
	display: inline-block;
	padding: 2rpx 12rpx;
	border-radius: 20rpx;
}

.online {
	color: #52c41a;
	background-color: rgba(82, 196, 26, 0.1);
}

.offline {
	color: #999;
	background-color: rgba(0, 0, 0, 0.05);
}

.action-buttons {
	display: flex;
	flex-direction: column;
}

.small-btn {
	font-size: 24rpx;
	padding: 10rpx 20rpx;
	border-radius: 30rpx;
	margin-bottom: 10rpx;
	text-align: center;
	min-width: 140rpx;
}

.monitor-btn {
	background-color: #1890ff;
	color: #fff;
}

.unbind-btn {
	background-color: #f5f5f5;
	color: #999;
}

/* 设备列表样式 */
.device-list {
	margin-top: 20rpx;
}

.device-item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.device-item:last-child {
	border-bottom: none;
}

.device-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	background-color: #e6f7ff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.device-icon.watch {
	background-color: #e6f7ff;
}

.device-icon.other {
	background-color: #fff2e8;
}

.icon-text {
	font-size: 40rpx;
}

.device-details {
	flex: 1;
}

.device-name {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 6rpx;
	display: block;
}

.device-status {
	font-size: 24rpx;
	color: #999;
}

.device-actions {
	padding: 0 10rpx;
}

.action-icon {
	font-size: 36rpx;
}

/* 空状态样式 */
.empty-info {
	padding: 40rpx 0;
	text-align: center;
}

.empty-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.empty-desc {
	font-size: 26rpx;
	color: #999;
}

/* 菜单列表样式 */
.menu-list {
	margin-top: 10rpx;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1px solid #2D1457;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-icon {
	font-size: 40rpx;
	margin-right: 20rpx;
	color: #A259FF;
}

.menu-text {
	flex: 1;
	font-size: 30rpx;
	color: #fff;
}

.menu-arrow {
	font-size: 36rpx;
	color: #A259FF;
}

/* 退出登录按钮 */
.logout-btn {
	margin-top: 60rpx;
	margin-bottom: 40rpx;
	background: linear-gradient(45deg, #221A36, #18122B);
	color: #F357A8;
	text-align: center;
	padding: 30rpx 0;
	border-radius: 16rpx;
	font-size: 32rpx;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	border: 1px solid #2D1457;
}

/* 设备、患者等其他卡片和空状态也可参考上面主色调进行调整 */
.patient-card, .section-card, .device-list, .device-item, .empty-info {
	background: transparent;
	color: #B8B8D1;
}
.patient-name, .device-name, .empty-text {
	color: #fff;
}
.device-status, .empty-desc {
	color: #A259FF;
}
</style>
